import React from 'react';
import { Button, Form, Input, message, Space } from 'antd';
import type { addCompany } from '../../types';
import { addCompanyApi } from '../../api';
import { rules } from '../../types/rules';

// [{ required: true,message:'请输入公司名称' }]

const layout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 },
};

const tailLayout = {
  wrapperCol: { offset: 8, span: 16 },
};

const AddCompanyList: React.FC = () => {
  const [form] = Form.useForm();

  const onFinish =async (values: addCompany) => {
    
    // console.log(event);
    const res = await addCompanyApi(values)
    if(res.data.code === 10000){
      message.success({
        type:'success',
        content:'添加付款单成功'
      })
      form.resetFields()
    }
    // console.log(res);

  };

  const onReset = () => {
    form.resetFields();
  };


  return (
    <Form
      // layout="vertical"
      {...layout}
      form={form}
      name="control-hooks"
      onFinish={onFinish}
      style={{ maxWidth: 600,margin:'0 auto' }}
    >
      <Form.Item name="name" label="公司名称" rules={rules.name}>
        <Input />
      </Form.Item>
      <Form.Item name="account" label="账 户" rules={rules.account}>
        <Input />
      </Form.Item>
      <Form.Item name="bank_name" label="银行支行" rules={rules.bank_name}>
        <Input />
      </Form.Item>
      <Form.Item {...tailLayout} style={{margin:'0 auto',textAlign:'center',maxWidth:600}}>
        <Space>
          <Button type="primary" htmlType="submit">
            提交
          </Button>
          <Button htmlType="button" onClick={onReset}>
            重置输入框
          </Button>
        </Space>
      </Form.Item>
    </Form>
  );
};

export default AddCompanyList;